<template>
  <div class="HeadNav">
    <ul>
      <li v-for="(item) in list" :key="item.id">
        <a href="#">{{ item.title }}</a>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const list = ref([
  { id: 1, title: '首页', url: '/index' },
  { id: 2, title: '苹果', url: '/goods' },
  { id: 3, title: '菠萝', url: '/cart' },
  { id: 4, title: '草莓', url: '/user' },
  { id: 5, title: '西瓜', url: '/order' },
  { id: 6, title: '葡萄', url: '/help' },
  { id: 7, title: '芒果', url: '/customer' },
]);
</script>

<style scoped>
.HeadNav {
  width: 100%;
  height: 60px;
  background-color: white;
  margin-top: 30px;
}

.HeadNav ul {
  margin-left: 300px;
}

.HeadNav ul li {
  display: inline-block;
  color: black;
  margin-left: 30px;
}

.HeadNav ul li a {
  color: black;
  font-size: 15px;
  line-height: 60px;
}

.HeadNav ul li a:hover {
  color: rgb(10, 229, 123);
}
</style>